Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Normalize the sortableTable on about:preferences #10789

Merged
merged 3 commits into from
Nov 21, 2017
Merged

Normalize the sortableTable on about:preferences #10789

merged 3 commits into from
Nov 21, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Sep 5, 2017

This blocks #10951

Addresses #10263
Addresses #10788
Closes #10356

  • Polish action icons
  • Polish verified icon placement
  • Remove alignRight from the sites column (it should be aligned to the left as default)
  • Align the include switches to the center
  • Align the action buttons to the center

Regression Test:

Test Plan:

  1. Visit https://www.youtube.com/user/latenight
  2. Open about:preferences#payments
  3. Make sure the channel title is aligned to the left

Test Plan 2:

  1. Run npm run add-simulated-synopsis-visits 100
  2. Open about:preferences#payments
  3. Pin some entries
  4. Make sure the table is properly displayed

Submitter Checklist:

  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Added/updated tests for this change (for new code or code which already has tests).
  • Ran git rebase -i to squash commits (if needed).
  • Tagged reviewers and labelled the pull request as needed.

Test Plan:

Reviewer Checklist:

Tests

  • Adequate test coverage exists to prevent regressions
  • Tests should be independent and work correctly when run individually or as a suite ref
  • New files have MPL2 license header

@luixxiul luixxiul added feature/about-pages polish Nice to have — usually related to front-end/visual tasks. refactoring/aphrodite labels Sep 5, 2017
@luixxiul luixxiul added this to the 0.21.x (Nightly Channel) milestone Sep 5, 2017
@luixxiul luixxiul self-assigned this Sep 5, 2017
css(styles.alignRight), // sites
css(styles.alignLeft), // include
css(styles.alignRight, styles.column_sites), // sites
css(styles.alignCenter), // include
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this done intentionally? we are not using align center anywhere else

Copy link
Contributor Author

@luixxiul luixxiul Sep 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is intentional (in terms of l10n). I'm taking a screenshot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the case like this:

Before:
screenshot 2017-09-11 16 57 40

After:
screenshot 2017-09-11 16 57 17

@luixxiul luixxiul added priority/P4 Minor loss of function. Workaround usually present. priority/P3 Major loss of function. and removed priority/P4 Minor loss of function. Workaround usually present. labels Sep 13, 2017
@@ -3,7 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const {StyleSheet, css} = require('aphrodite')
const {StyleSheet, css} = require('aphrodite/no-important')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

w00t beautiful

<span className={css(
styles.actionIcons__icon,
styles.actionIcons__icon_pin,
pinned && styles.actionIcons__icon_pin_pinned
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: this could be styles.actionIcons__icon_pin_isPinned

@@ -350,11 +357,18 @@ const styles = StyleSheet.create({
},

verifiedTd: {
padding: '0 0 0 15px'
// Set the same padding with the padding-top and padding-bottom
paddingRight: '.3ch !important',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like using ch units for width/height but for padding seems obscure. Let me know your thoughts on why this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it sounds fair. I will revisit the padding values of sortable table to see which one works most properly.

cezaraugusto
cezaraugusto previously approved these changes Sep 15, 2017
Copy link
Contributor

@cezaraugusto cezaraugusto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left a comment in https://github.com/brave/browser-laptop/pull/10789/files#r139240607. lmk your thoughts but otherwise this lgtm

@luixxiul
Copy link
Contributor Author

@cezaraugusto I've reset the padding with consts: globalStyles.sortableTable.cell.normal.padding and globalStyles.sortableTable.cell.small.padding.

@cezaraugusto
Copy link
Contributor

blocking now until 0.19.x

@luixxiul
Copy link
Contributor Author

This blocks #10951

@ghost ghost removed the priority/P5 Cosmetic. Spelling, copy, layout. New features (which should also be part of an initiative). label Sep 26, 2017
@luixxiul luixxiul dismissed cezaraugusto’s stale review October 8, 2017 05:33

Additional commits have been added.

@codecov-io
Copy link

codecov-io commented Oct 13, 2017

Codecov Report

Merging #10789 into master will decrease coverage by 0.02%.
The diff coverage is 70.96%.

@@            Coverage Diff             @@
##           master   #10789      +/-   ##
==========================================
- Coverage   53.38%   53.36%   -0.03%     
==========================================
  Files         274      274              
  Lines       26020    26019       -1     
  Branches     4170     4169       -1     
==========================================
- Hits        13891    13884       -7     
- Misses      12129    12135       +6
Flag Coverage Δ
#unittest 53.36% <70.96%> (-0.03%) ⬇️
Impacted Files Coverage Δ
app/renderer/components/styles/global.js 100% <ø> (ø) ⬆️
...erer/components/preferences/payment/pinnedInput.js 51.35% <100%> (ø) ⬆️
app/renderer/components/common/sortableTable.js 61.68% <100%> (+0.62%) ⬆️
...erer/components/preferences/payment/ledgerTable.js 89.58% <100%> (+0.27%) ⬆️
js/about/preferences.js 45.34% <30.76%> (-0.46%) ⬇️
js/stores/appStoreRenderer.js 91.17% <0%> (-8.83%) ⬇️
app/renderer/components/reduxComponent.js 84.37% <0%> (-6.25%) ⬇️
js/stores/windowStore.js 26.71% <0%> (-0.3%) ⬇️
... and 1 more

@bbondy bbondy modified the milestones: 0.21.x (Developer Channel), 0.20.x (Beta Channel), Backlog Oct 25, 2017
@luixxiul luixxiul changed the title Normalize the tables on about:preferences Normalize the sortableTable on about:preferences Nov 17, 2017
@luixxiul luixxiul removed the polish Nice to have — usually related to front-end/visual tasks. label Nov 18, 2017
Suguru Hirahara added 3 commits November 19, 2017 17:56
Addresses #10263
Addresses #10788
Closes #10356

- Polish action icons
- Polish verified icon placement
- Remove alignRight from the sites column (it should be aligned to the left as default)
- Align the include switches to the center
- Align the action buttons to the center

Test Plan:
1. Visit https://www.youtube.com/user/latenight
2. Open about:preferences#payments
3. Make sure the channel title is aligned to the left
- Replace headerClassNames with headerStyles
- Replace columnClassNames with columnStyles on ledgerTable
- Replace bodyClassNames with bodyStyles
- Remove customCellClassesStr
- Remove .th-inner
- Set white-space: nowrap to ledgerTable.js

Auditors:

Test Plan:
1. Run `npm run add-simulated-synopsis-visits 100`
2. Open about:preferences#payments
3. Pin some entries
4. Make sure the table is properly displayed
@cezaraugusto cezaraugusto merged commit 6853808 into brave:master Nov 21, 2017
@NejcZdovc NejcZdovc modified the milestones: Triage Backlog, 0.22.x (Nightly Channel) Nov 21, 2017
@luixxiul luixxiul deleted the polish-sortableTable-preferences branch November 21, 2017 06:29
@bbondy bbondy modified the milestones: 0.22.x (Developer Channel), 0.23.x (Nightly Channel) Feb 25, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix the wrong spacing around the per cent number on ledger panel
5 participants